<template>
  <div class="help-center">
    <div class="header-info">
      <p>帮助中心</p>
    </div>

    <!--操作流程-->
    <div class="operation-procedure help-item-title">
      <span ></span>
      <h3>操作流程</h3>
      <div>
        <img class="operation-procedure-img" src="../assets/operationPprocedur.png" alt="">
      </div>
    </div>

    <!--新手指南-->
    <div class="newbie-guide help-item-title">
      <div class="title-header">
        <span ></span>
        <h3>新手指南</h3>
      </div>

      <ul class="newbie-guide-ul clear-fix">
        <li class="active">首页</li>
        <li>信息上传</li>
        <li>智能码采购</li>
        <li>包装录码</li>
        <li>商品流通</li>
        <li>商品追踪</li>
      </ul>
      <div class="newbie-guide-detail-warp">
        <p class="newbie-guide-detail" style="display: block">
          查看当前企业管理信息，包括当前库存信息，出入库信息，消费者的分布情况等信息。
        </p>
        <p class="newbie-guide-detail">
          1、企业信息——企业注册登录成功后，在此处填写企业的详细信息。<br>
          2、商品信息——企业可以将自己的商品上传到系统，审核通过后，商品才可以在后边进行关联。<br>
          3、广告管理——企业可以把自己有意向对外宣传、展示的商品放在此处，待审核通过后，可以在相应的位置进行广告的展示推荐。<br>
          4、用户管理——管理员可以添加普通管理员并赋予其权限对系统进行操作。
        </p>
        <p class="newbie-guide-detail">
          1、购码——企业可以在此处购买智能防伪码。<br>
          2、我的订单——企业所购买的记录以及未支付的记录会展示在此。
        </p>
        <p class="newbie-guide-detail">
          1、录码装箱——把码和商品做关联,然后进行装箱操作。<br>
          2、重新包装——就是把一个或几个已录好的下级码与一个上级码相关联。先扫要合并的下级码，然后扫要关联的上级码即可。
        </p>
        <p class="newbie-guide-detail">
          1、入库——商品贴码后扫码入库，库存增加。<br>
          2、出库——商品扫码后进行出库，库存减少。<br>
          3、越库配送——商品可不经过出入库，直接发货。
        </p>
        <p class="newbie-guide-detail">
          1、工作日志——可以查询商品的录入时间，具体的操作人员以及出入库等信息。<br>
          2、标记查询——可以查询商品的标记。<br>
          3、流通网络图——查询商品的流转信息。<br>
          4、召回管理——当商品发生意外情况时，可以进行商品的召回，帮助企业尽快发现问题商品，及时解决问题。
        </p>
      </div>
    </div>

    <div class="help-item-title">
      <div class="title-header">
        <span></span>
        <h3>常见问题</h3>
      </div>
      <ul class="FQA">
        <li>1、图片、视频上传不上去</li>
        <li class="FQA-A">可能是由于您所上传的图片或者视频的格式系统暂不支持，系统暂时支持上传的图片格式有JPG、PNG、GIF、BMP、ICO、ICON，支持上传的视频格式有MP4、AVI、WEBM、OGG、MOV。</li>
        <li>2、如何增加用户</li>
        <li class="FQA-A">新用户的添加需要管理员来操作。管理员在“信息上传——用户信息——新增”菜单添加新用户，对其设置账户、密码、权限，即可完成新用户的添加。</li>
        <li>3、如何修改密码</li>
        <li class="FQA-A">系统登录成功后在右上角的管理员下拉菜单可以看到修改密码选项。</li>
        <li>4、广告管理是做什么的</li>
        <li class="FQA-A">广告管理功能是品致信防伪系统为了商家可以推广自己的产品而推出的特色服务，商家上传商品经过审核后，会在相应的版面进行展示。</li>
        <li>5、购码中印码下单和数据下载有何不同</li>
        <li class="FQA-A">印码下单就是所购买的码会实物快递的形式寄送到企业手中；数据下载就是所购买的码不是实物，而是以数据文档的形式发送给企业，企业可自行打印。</li>
        <li>6、扫码关联商品过程中在未点击“结束扫码”而终止操作，之前扫得码会保存吗</li>
        <li class="FQA-A">可以，品致信防伪溯源系统是智能的防伪系统，系统会为企业的每一步的扫码操作实时保存记录。</li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default ({
    data(){
      return {

      }
    },
    mounted(){
      this.changeTag();
    },
    methods:{
      changeTag(){
        let newbieGuideUl=document.getElementsByClassName('newbie-guide-ul')[0];
        let newbieGuideLis=newbieGuideUl.getElementsByTagName('li');
        let newbieGuideDetail=document.getElementsByClassName('newbie-guide-detail');
        for(let i=0;i<newbieGuideLis.length;i++){
          newbieGuideLis[i].onclick=function () {
            for(let j=0;j<newbieGuideLis.length;j++){
              newbieGuideLis[j].className='';
              newbieGuideDetail[j].style.display='none';
            }
            newbieGuideLis[i].className='active';
            newbieGuideDetail[i].style.display='block';
          }
        }
      }
    }
  })
</script>

<style scoped>
  .help-item-title{
    font-size: 16px;
    color: #333;
    line-height: 56px;
  }
  .help-item-title span{
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #2f8cec;
    transform:rotate(45deg);
    margin-right: 10px;
  }
  .help-item-title h3{
    font-weight: normal;
    display: inline-block;
  }
  .operation-procedure-img{
    display: block;
    margin: 0 auto;
  }
   .title-header{
    border-bottom: 1px solid #d3d4d6;
  }
  .newbie-guide-ul{
    padding: 40px 0 40px 26px;
    min-width: 1266px;
  }
  .newbie-guide-ul li{
    float: left;
    width: 110px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    color: #007aff;
    border: 1px solid #007aff;
    margin-right: 99px;
    border-radius: 5px;
    position: relative;
  }
  .newbie-guide-ul li:hover{
    cursor: pointer;
  }
  .newbie-guide-ul li:after{
    position: absolute;
    display: block;
    content: '';
    height:1px;
    width: 99px;
    background: #007aff;
    top: 20px;
    left: 111px;
  }
  .newbie-guide-ul .active{
    background: #007aff;
    color: #fff;
  }
  .newbie-guide-ul li:last-child:after{
    display: none;
  }
  .newbie-guide-detail{
    padding-left: 26px;
    font-size: 16px;
    color: #666;
    display: none;
  }
  .newbie-guide-detail-warp .active{
    display: block;
  }
  .FQA li{
    height: 58px;
    line-height: 58px;
    padding-left: 22px;
    font-size: 16px;
    color: #666;
  }
  .FQA .FQA-A{
    background: #f8f8f7;
    min-width: 1358px;
    padding-left: 46px;
  }
</style>
